<script lang="ts" setup>
import type { TypeUserInfo } from '@/stores/types';
import LcuImage from '@/components/lcuImage.vue';
import { useClientStore } from '@/stores/client'
import { defineEmits, onMounted, ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({}),
  },
  options: {
    type: Array as () => TypeUserInfo[],
    default: () => [],
  },
})

const emits = defineEmits(['change', 'update:modelValue', 'del'])

function onChooseUser(user: TypeUserInfo) {
  if (user.puuid === props.modelValue.puuid) return
  emits('update:modelValue', user)
  emits('change', user)
}

function del(puuid) {
  emits('del', puuid)
}
</script>

<template>
  <a-trigger trigger="hover" :unmount-on-close="false">
    <div class="user_choose flex items-center cursor-pointer text-#7D7D88 font-bold">
      <span>{{ modelValue.gameName }}</span>
      <icon-down class="user_choose_icon" />
    </div>
    <template #content>
      <div class="user_choose_dialog">
        <div v-for="item in options" :key="item.puuid" class="user_choose_item flex items-center"
          :class="{ selected: modelValue?.puuid && item.puuid === modelValue.puuid }" @click="onChooseUser(item)">
          <div class="w-16px h-16px rounded-full">
            <LcuImage :id="item.profileIconId" width="100%" height="100%" type="profile" />
          </div>
          <span class="ml-6px text-12px min-w-100px mr-20px">{{ item.gameName }}</span>
          <icon-close v-if="!item?.isMy" class="opacity-40 text-10px ml-auto cursor-pointer" @click.stop="del(item.puuid)" />
        </div>
      </div>
    </template>
  </a-trigger>
</template>

<style lang="scss" scoped>
.user_choose {
  .user_choose_icon {
    margin-left: 8px;
    stroke-width: 7;

    &.open_choose {
      transform: rotate(180deg);
    }
  }
}

.user_choose_dialog {
  padding: 10px 6px;
  margin-top: 12px;
  background-color: var(--module-bg-color);
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  user-select: none;

  img {
    border-radius: 999px;
    border: 1px solid #ccc;
  }

  .user_choose_item {
    padding: 8px 10px;
    transition: all 0.3s ease-in-out;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: #f5f5f5;
    }

    &.selected {
      background-color: #94BFFF;
    }

    &+.user_choose_item {
      margin-top: 2px;
    }
  }
}
</style>
